<script setup>
import { ref, onMounted, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { uploadResourcePage, workers, uploadResourceStatistics } from '@/utils/api.js'
import uploadMapImages from '@/components/common/uploadDa.vue';
import moment from 'moment';

// 对象
const $moment = moment;
const pageSize = ref(12);
const pageNum = ref(1);
const totalElements = ref(0);
const currentPage = ref(1);

const umai = ref(null)
const workerslist = ref([]);
const startTime = ref('');
const timeStr = ref('');
const workerName = ref('');
const keywords = ref('');
const value1 = ref('');
const paixu = ref(0);

const cols1 = ref([]);
const cols2 = ref([]);
const cols3 = ref([]);
const cols4 = ref([]);

const moni = ref([])


const sts = ref({
    "speciesCount": 0,
    "animalCount": 0,
    "plantCount": 0,
    "fungusCount": 0,
    "speciesPhotoCount": 0,
    "animalPhotoCount": 2,
    "plantPhotoCount": 0,
    "fungusPhotoCount": 0,
    "identifyCount": 0,
    "unIdentifyCount": 0
})

// 图片
import mogu from '@/assets/img/mogu.png'
import ft1 from '@/assets/img/f1.png'
import ft2 from '@/assets/img/ft2.png'
import ft3 from '@/assets/img/ft3.png'
import ft4 from '@/assets/img/ft4.png'
import ft5 from '@/assets/img/ft5.png'
import AI from '@/assets/img/AI.png'

// 事件
const handleCurrentChange = (val) => {
    pageNum.value = val;
    getuploadResourcePage();

};

const customUpload = () => {
    umai.value.open();
}


const getworkers = async () => {
    let areaId = JSON.parse(window.sessionStorage.getItem('usermsg')).areaId;
    let obj = {
        areaId: areaId,
        siteIdStr: ""
    };
    let res = await workers(obj);
    let arr = [];
    if (res.code == '200') {
        res.data.forEach(e => {
            let z = {
                value: e,
                label: e,
            }
            arr.push(z)
        });

        workerslist.value = arr;
    }

};

const getuploadResourceStatistics = async () => {
    let areaId = JSON.parse(window.sessionStorage.getItem('usermsg')).areaId;
    let res = await uploadResourceStatistics(areaId)

    if (res.code == '200') {
        sts.value = res.data;
    }

}

const gettimes = (data) => {
    if (startTime.value && startTime.value != '') {
        // var year = data.getFullYear();
        // var month = data.getMonth() + 1;
        // var date = data.getDate();
        // if (month >= 1 && month <= 9) {
        //     month = "0" + month;
        // }
        // if (date >= 0 && date <= 9) {
        //     date = "0" + date;
        // }
        // var t1 = year + "-" + month + "-" + date;
        timeStr.value = Date.parse(startTime.value)
    } else {
        timeStr.value = "";
    }
    pageNum.value = 1;
    currentPage.value = 1;
    getuploadResourcePage();
}

const getuploadResourcePage = async () => {
    let res = await uploadResourcePage({
        "pageSize": 12,
        "pageNum": pageNum.value,
        "areaId": JSON.parse(window.sessionStorage.getItem('usermsg')).areaId,
        "sort": paixu.value, //0-按时间 1-按物种
        "startTime": timeStr.value,
        "workerName": workerName.value,
        "keywords": keywords.value
    })

    if (res.code == '200') {
        let c1 = 0, c2 = 0, c3 = 0, c4 = 0;
        let mb = [
            {
                id: 'lazyl1',
                col: 1,
                children: []
            },
            {
                id: 'lazyl2',
                col: 2,
                children: []
            },
            {
                id: 'lazyl3',
                col: 3,
                children: []
            },
            {
                id: 'lazyl4',
                col: 4,
                children: []
            },
        ]
        res.data.content.forEach((e, x) => {
            e['path'] = e.mediaList[0].path;
            e['aiStatus'] = e.mediaList[0].aiStatus;
            e['type'] = e.mediaList[0].type;

            if (x % 4 == 0) {
                let c = [{
                    id: "col1-1",
                    ih: 340,
                    ao: {}
                },
                {
                    id: "col1-2",
                    ih: 300,
                    ao: {}
                },
                {
                    id: "col1-3",
                    ih: 300,
                    ao: {}
                }]

                c[c1].ao = e

                mb[0].children.push(c[c1]);
                c1++
            }
            if (x % 4 == 1) {
                let c = [{
                    id: "col2-1",
                    ih: 300
                },
                {
                    id: "col2-2",
                    ih: 300
                },
                {
                    id: "col2-3",
                    ih: 340
                }]
                c[c2]['ao'] = e
                mb[1].children.push(c[c2]);
                c2++
            }
            if (x % 4 == 2) {
                let c = [{
                    id: "col3-1",
                    ih: 300
                },
                {
                    id: "col3-2",
                    ih: 340
                },
                {
                    id: "col3-3",
                    ih: 300
                }]
                c[c3]['ao'] = e
                mb[2].children.push(c[c3]);
                c3++
            }
            if (x % 4 == 3) {
                let c = [{
                    id: "col4-1",
                    ih: 340
                },
                {
                    id: "col4-2",
                    ih: 300
                },
                {
                    id: "col4-3",
                    ih: 300
                }]
                c[c4]['ao'] = e
                mb[3].children.push(c[c4]);
                c4++
            }
        });
        moni.value = mb;
        totalElements.value = res.data.totalElements;
    }
}


const reData = () => {
    pageNum.value = 1;
    currentPage.value = 1;
    getuploadResourcePage();
}

defineExpose({
    $moment
})

onMounted(() => {
    getworkers();
    getuploadResourcePage();
    getuploadResourceStatistics();
})

</script>
<template>
    <div>
        <div class="ha-title">
            <div>
                <span>数据上传</span>
            </div>
        </div>
        <!-- 主体 B-->
        <div class="du_Con">
            <!-- 左边  -->
            <div class="du_Con_l">
                <div class="du_Con_l_t">
                    <span class="ft-1">拍摄物种(种)</span>
                    <span class="ft-2">{{ sts.speciesCount }}</span>
                </div>
                <div class="ft-3">
                    <div>
                        <img style="width: 20px;height: 20px;" :src="ft1" alt="">
                        <span class="ft-4">动物</span>
                    </div>
                    <div class="ft-5"><span>{{ sts.animalCount }}</span></div>
                </div>
                <div class="ft-3">
                    <div>
                        <img style="width: 20px;height: 20px;" :src="ft2" alt="">
                        <span class="ft-4">植物</span>
                    </div>
                    <div class="ft-5"><span>{{ sts.plantCount }}</span></div>
                </div>
                <div class="ft-3">
                    <div>
                        <img style="width: 20px;height: 20px;" :src="mogu" alt="">
                        <span class="ft-4">真菌</span>
                    </div>
                    <div class="ft-5"><span>{{ sts.fungusCount }}</span></div>
                </div>

                <div class="du_Con_l_t">
                    <span class="ft-1">影像数量(条)</span>
                    <span class="ft-2">{{ sts.speciesPhotoCount }}</span>
                </div>

                <div class="ft-3">
                    <div>
                        <img style="width: 20px;height: 20px;" :src="ft1" alt="">
                        <span class="ft-4">动物影像</span>
                    </div>
                    <div class="ft-5"><span>{{ sts.animalPhotoCount }}</span></div>
                </div>
                <div class="ft-3">
                    <div>
                        <img style="width: 20px;height: 20px;" :src="ft2" alt="">
                        <span class="ft-4">植物影像</span>
                    </div>
                    <div class="ft-5"><span>{{ sts.plantPhotoCount }}</span></div>
                </div>
                <div class="ft-3">
                    <div>
                        <img style="width: 20px;height: 20px;" :src="mogu" alt="">
                        <span class="ft-4">真菌影像</span>
                    </div>
                    <div class="ft-5"><span>{{ sts.fungusPhotoCount }}</span></div>
                </div>

                <div style="height: 1px;width: 100%;background-color: #DCDFE6;margin-bottom: 24px;"></div>

                <div class="ft-3">
                    <div>
                        <img style="width: 20px;height: 20px;" :src="ft4" alt="">
                        <span class="ft-4">已鉴定</span>
                    </div>
                    <div class="ft-5"><span>{{ sts.identifyCount }}</span></div>
                </div>
                <div class="ft-3">
                    <div>
                        <img style="width: 20px;height: 20px;" :src="ft5" alt="">
                        <span class="ft-4">未鉴定</span>
                    </div>
                    <div class="ft-5"><span>{{ sts.unIdentifyCount }}</span></div>
                </div>

                <!-- 上传按钮 -->
                <div class="ft-6" @click.stop="customUpload">
                    <span>上传</span>
                </div>
            </div>

            <!-- 右边 -->
            <div class="du_Con_r">
                <div class="du_Con_l_r">
                    <div class="fr-1">
                        <div @click.stop="paixu = 0, reData()" :style="{ color: paixu == 0 ? '#387BFF' : '#AAAAAA' }">
                            按时间排序</div>
                        <div><span style="margin: 0 16px;color: #606266;">/</span></div>
                        <div @click.stop="paixu = 1, reData()" :style="{ color: paixu == 1 ? '#387BFF' : '#AAAAAA' }">
                            按物种排序</div>
                    </div>

                    <el-row :gutter="20" style="width: 700px;">
                        <el-col :span="7">
                            <el-date-picker v-model="startTime" type="date" @change="gettimes" placeholder="选择日期"
                                size="large" />
                        </el-col>
                        <el-col :span="7">
                            <el-select v-model="workerName" @change="reData" placeholder="选择人员" size="large">
                                <el-option v-for="(item, index) in workerslist" :key="index + 'wws'" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-col>
                        <el-col :span="10">
                            <el-input v-model="keywords" placeholder="搜索物种" size="large" class="input-with-select">
                                <template #append>
                                    <el-button @click.stop="reData" :icon="Search" />
                                </template>
                            </el-input>
                        </el-col>
                    </el-row>
                </div>

                <!-- 瀑布流 -->
                <div class="lazyl">
                    <div style="width: 100%;height: 100%;" class="scol">
                        <div v-for="(item, index) in moni" :key="item.id" class="lls">

                            <div v-for="i in item.children" :key="i.id" :style="{ height: `${i.ih}px` }">
                                <div class='ih_1'>
                                    <!-- <img:class="i.ih> 300 ? 'ih_540' : 'ih_300'"
                                        :src="i.ao.path" alt=""> -->
                                    <el-image v-if="i.ao.type == 'image'" style="height: 150%" :src="i.ao.path"
                                        :zoom-rate="2" :max-scale="7" :min-scale="0.2" :preview-src-list="[i.ao.path]"
                                        :initial-index="0" fit="cover" />

                                    <video v-if="i.ao.type == 'video'" style="width: 100%;" controls
                                        :src="i.ao.path"></video>

                                    <audio v-if="i.ao.type == 'voice'" style="width: 100%;" controls
                                        :src="i.ao.path"></audio>

                                </div>
                                <div class='ih_2'>
                                    <div class="iht-1">
                                        <div>
                                            <span>{{ i.ao.keywords == '' ? '--' : i.ao.keywords }}</span>
                                            <img v-if="i.ao.aiStatus == 1" :src="AI"
                                                style="margin: 0 16px;width: 22px;height: 22px;" alt="">
                                        </div>

                                        <el-button v-if="i.ao.identifyStatus == 0"
                                            style="border:1px solid #FFC300;background-color: rgba(255, 195, 0, 0.1);color: #FFC300;"
                                            plain>未鉴定</el-button>
                                        <el-button v-if="i.ao.identifyStatus == 1"
                                            style="border:1px solid #387BFF;background-color: rgba(56, 123, 255, 0.1);color:#387BFF;"
                                            plain>已鉴定</el-button>
                                    </div>
                                    <div class="iht-2" style="color: #387BFF;font-size: 16px;">
                                        {{ i.ao.zhongLatin ? i.ao.zhongLatin : '--' }}
                                    </div>
                                    <div class="iht-3"> <span>{{ i.ao.place == '' ? '--' : i.ao.place }}</span></div>
                                    <div class="iht-4"><span style="margin-right: 16px;">{{ i.ao.workUser
                                            }}</span><span>{{
                                                $moment(i.ao.recordTime).format('YYYY-MM-DD HH:mm:ss')
                                            }}</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 瀑布流 -->
                <!-- 分页 B-->
                <div class="ml-page" style="bottom: 8px;">
                    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" background
                        layout="total, prev, pager, next, jumper" :total="totalElements"
                        @current-change="handleCurrentChange" />
                </div>
                <!-- 分页 E-->


            </div>
        </div>
        <!-- 主体 E-->
        <uploadMapImages ref="umai" @refreshcar="reData" />
    </div>


</template>
<style scoped>
.du_Con {
    width: 100%;
    height: calc(100% - 45px);
    margin-top: 10px;
    display: flex;
    overflow: hidden;
}

.du_Con_l {
    width: 348px;
    height: 100%;
    padding: 24px;
    border-radius: 4px;
    background: rgba(245, 247, 250, 1);
    position: relative;
}

.du_Con_l_t {
    width: 100%;
    height: 50px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #DCDFE6;
}

.ft-1 {
    font-size: 22px;
    font-family: 'CustomFont';
}

.ft-2 {
    font-weight: 700;
    font-size: 20px;
    color: #387BFF;
}

.ft-3 {
    width: 100%;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ft-3>div {
    display: flex;
    align-items: center;
}

.ft-4 {
    margin-left: 18px;
    color: #606266;
    font-family: 'CustomFont';
    font-size: 20px;
}

.ft-5 {
    font-size: 18px;
    font-weight: 700;
    color: #AAAAAA;
}

.ft-6 {
    width: 200px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    border-radius: 4px;
    background: #387BFF;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    cursor: pointer;
}

.du_Con_r {
    width: calc(100% - 372px);
    height: 100%;
    padding: 24px;
    margin-left: 24px;
    border-radius: 4px;
    background-color: #F5F7FA;
    position: relative;
}

.du_Con_l_r {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fr-1 {
    font-family: 'CustomFont';
    font-size: 22px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.lazyl {
    display: flex;
    width: 100%;
    height: calc(100% - 60px);
    padding: 16px 0;
    justify-content: space-between;
    overflow: hidden;
}

.lazyl>div {
    display: flex;
    justify-content: space-between;
}

.lls {
    width: calc(25% - 12px);
    flex-shrink: 0;
}

.lls>div {
    width: 100%;
    margin-bottom: 16px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #eee;
    box-sizing: border-box;
    overflow: hidden;
}

.ih_1 {
    width: 100%;
    height: calc(100% - 160px);
    background-color: rgba(0, 0, 0, .9);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ih_540 {
    max-height: 150%;
}

.ih_300 {
    max-width: 200%;
}

.ih_2 {
    width: 100%;
    height: 160px;
    padding: 16px;
    overflow: hidden;
}

.ih_2>div {
    width: 100%;
    display: flex;
    line-height: 2;
    align-items: center;
}

.iht-1 {
    justify-content: space-between;
    font-family: 'CustomFont';
    color: #387BFF;
    font-size: 18px;
}

.iht-1>div {
    display: flex;
    align-items: center;
}

.iht-3 {
    color: #606266;
    overflow: hidden;
}

.iht-3 span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.iht-4 {
    color: #AAAAAA;
}
</style>